<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>测试</title>
  <meta name="Keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />
  <meta name="screen-orientation" content="" />
  <meta name="x5-orientation" content="" />
  <meta name="x5-page-mode" content="app" />
  <link rel="stylesheet" href="../css/reset.css">
  <style>
    /* @font-face {
      font-family: "VT323";
      src: url("../assets/05/font/VT323-Regular.ttf");
    }

    @font-face {
      font-family: "Alfa Slab One";
      src: url("../assets/05/font/AlfaSlabOne-Regular.ttf");
    } */

    @font-face {
      font-family: "Oswald";
      src: url("../../assets/05/font/Oswald-Regular.ttf");
    }

    #container {
      position: fixed;
      left: 0;
      z-index: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    .app {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
      
    }

    .ui {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      /* display: none; */
    }

    .key-btns {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
      padding: 0 5px;
    }

    .key-btns>li {
      width: 111px;
      height: 37px;
      background: url(../assets/05/imgs/btn.png) no-repeat;
      background-size: 100% auto;
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 55px;
      box-sizing: border-box;
      font-weight: bold;
      color: #000;
      font-size: 16px;
      font-family: "Oswald";
      text-align: right;
      cursor: pointer;
    }

    .key-btns>li::before {
      content: '';
      background-repeat: no-repeat;
      background-size: 100% auto;
      height: 50px;
      width: 50px;
      display: block;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -25px;
    }

    .key-type-a::before {
      background-image: url(../assets/05/imgs/key0.png);
    }

    .key-type-b::before {
      background-image: url(../assets/05/imgs/key1.png);
    }

    .key-type-c::before {
      background-image: url(../assets/05/imgs/key2.png);
    }

    .key-btns>li::after {
      content: '';
      display: block;
      width: 24px;
      height: 20px;
      background-image: url(../assets/05/imgs/unit.png);
      background-repeat: no-repeat;
      background-size: 100% auto;
      margin-left: 2px;
    }

    .key-btns>li:active {
      transition: .2s all;
      transform: scale(1.2);
    }

    .mask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .65);
      z-index: 99;
    }

    .success-box {
      width: 92vw;
      height: 62vw;
      position: fixed;
      z-index: 100;
      left: 50%;
      margin-left: -46.5vw;
      top: 50%;
      margin-top: -30vw;
    }
    .success-content{
      width: 100%;
      height: 100%;
      background: url(../assets/05/imgs/success.png) no-repeat;
      background-size: 100% auto;
       z-index: 2;
      position: relative;
      box-sizing: border-box;
      padding: 22px 20px 13px 22px;
    }
    .success-content>ul {
      position: relative;
      width: 100%;
      height: calc(100% - 23px);
      overflow: auto;
    }

    .success-content>ul>li{
      width: 24%;
      padding-top: 24%;
      box-sizing: border-box;
      background: url(../assets/05/imgs/box.png) no-repeat;
      background-size: 100% auto;
      margin-left: 1%;
      margin-top: 3px;
      float: left;
    }

    .success-content>ul>li>img{
      width: 75%;
      object-fit: cover;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .success-box::before {
      content: '';
      width: 57vw;
      height: 54vw;
      background: url(../assets/05/imgs/title.png) no-repeat;
      background-size: 100% auto;
      position: absolute;
      top: -34vw;
      left: 50%;
      margin-left: -28.5vw;
    }
    .close{
      width:12vw;
      height:12vw;
      background: url(../assets/05/imgs/close.png) no-repeat;
      background-size: 100% auto;
      position: absolute;
      left: 50%;
      margin-left: -6vw;
      bottom: -10vw;
      z-index: 9;
    }
    .hide{
      display: none;
    }
    .chat{
      width: calc(100% - 30px);
      height: 80px;
      background: rgba(0, 0, 0, .75);
      position: fixed;
      box-sizing: border-box;
      display: none;
    }
    .chat p span{
      color: rgb(241, 231, 89);
      font-size: 16px;
    }
    .chat>p{
      color: #fff;
      font-size: 16px;
      font-family: "Oswald";
    }
    .chat.right{
      right: 0;
      padding:10px 120px 10px 15px;
    }
    .chat.right>img{
      position: absolute;
      right: 10px;
      bottom: 0px;
      width: 130px;
      height: 130px;
    }
    .chat.left{
      left: 0;
      padding:10px 15px 10px 120px;
    }
    .chat.left>img{
      position: absolute;
      left: 10px;
      bottom: 0px;
      width: 130px;
      height: 130px;
      transform: scaleX(-1);
    }
    @media screen and (min-width: 480px){
      .success-box{
        width:420px;
        height: 288px;
        margin-left:-210px;
        margin-top: -150px;
      }
      .success-box::before{
        width: 196px;
        height: 190px;
        top: -130px;
        margin-left: -98px;
      }
      .close{
        width: 40px;
        height: 40px;
        margin-left: -20px;
        bottom: -60px;
      }
    }
  </style>
</head>

<body>

  <div class="app">
    <div id='container'></div>
    <div class="ui">
      <div class="hide btns-box">
        <ul class="key-btns">
          <li class="key-btn key-type-a" data-type="0">50</li>
          <li class="key-btn key-type-b" data-type="1">200</li>
          <li class="key-btn key-type-c" data-type="2">500</li>
        </ul>
      </div>
      <div class="chat right" style="top: 20%;" id="chat0">
        <p>伙计，我们探险发现了许多宝箱，有兴趣看一下么？</p>
        <img src="../assets/05/imgs/role1.png" alt="" srcset="">
      </div>
      <div class="chat left" style="top: 45%;" id="chat1">
        <img src="../assets/05/imgs/role0.png" alt="" srcset="">
        <p>给你<span id="money">00</span><span>钻石</span>，来把<span id="key">钥匙</span>。</p>
      </div>
      <div class="chat right" style="top: 70%;" id="chat2">
        <p>好嘞~这个<span>宝箱</span>就是你的啦~</p>
        <img src="../assets/05/imgs/role1.png" alt="" srcset="">
      </div>
      <div class="mask hide"></div>
      <div class="success-box hide">
        <i class="close"></i>
        <div class="success-content">
          <ul>
            <li class="item"><img src="../assets/05/imgs/items/00.jpg" alt="" srcset=""></li>
            <li class="item"><img src="../assets/05/imgs/items/01.jpg" alt="" srcset=""></li>
            <li class="item"><img src="../assets/05/imgs/items/02.jpg" alt="" srcset=""></li>
            <li class="item"><img src="../assets/05/imgs/items/03.jpg" alt="" srcset=""></li>
            <li class="item"><img src="../assets/05/imgs/items/04.jpg" alt="" srcset=""></li>
            <li class="item"><img src="../assets/05/imgs/items/05.jpg" alt="" srcset=""></li>
            <li class="item"><img src="../assets/05/imgs/items/09.jpg" alt="" srcset=""></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <script src="../js/three.min.js"></script>
  <script src="../js/GLTFLoader.js"></script>
  <script src="../js/OrbitControls.js"></script>
  <script src="../js/utils/zepto.min.js"></script>
  <script src="../js/utils/gsap.min.js"></script>
  <script src="../js/main/05/app.js"></script>
</body>
</head>

</html>